<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文章列表</title>
    <link rel="stylesheet" href="js/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="js/jquery-1.12.4.min.js"></script>
    <!-- 引入模板引擎js文件 -->
    <script src="./js/template-web.js"></script>
    <!-- 引入分页插件 pagination 的js文件 -->
    <script src="./js/jquery.twbsPagination.js"></script>
</head>

<body>
    <div class="container-fluid">
        <div class="common_title">
            文章列表
        </div>
        <div class="container-fluid common_con">
            <div class="row opt_btns">
                <div class="col-xs-6">
                    <form class="form-inline">
                        <select id="selCategory" name="" class="form-control input-sm">
                            <option value="">所有分类</option>
                            <option>未分类</option>
                            <option>奇趣事</option>
                            <option>会生活</option>
                            <option>爱旅行</option>
                        </select>
                        <select id="selStatus" name="" class="form-control input-sm">
                            <option value="">所有状态</option>
                            <option value="草稿">草稿</option>
                            <option value="已发布">已发布</option>
                        </select>
                        <button id="btnSearch" class="btn btn-default btn-sm">筛选</button>
                    </form>
                </div>
                <div class="col-xs-6">
                    <a href="article_release.html" class="btn btn-success btn-sm pull-right" id="release_btn">发表文章</a>
                </div>
            </div>

            <table class="table table-striped table-bordered table-hover mp20">
                <thead>
                    <tr>
                        <th>标题</th>
                        <th>作者</th>
                        <th>分类</th>
                        <th class="text-center">发表时间</th>
                        <th class="text-center">状态</th>
                        <th class="text-center" width="100">操作</th>
                    </tr>
                </thead>
                <tbody>



                    <tr>

                        <td>王积千造统最头</td>
                        <td>杰克</td>
                        <td>奇趣事</td>
                        <td class="text-center">2017-06-08 07:08:46</td>


                        <td class="text-center">已发布</td>


                        <td class="text-center">
                            <a href="article_edit.html" class="btn btn-default btn-xs">编辑</a>
                            <a href="javascript:deleteTr( 1005 );" class="btn btn-danger btn-xs">删除</a>
                        </td>
                    </tr>



                    <tr>

                        <td>级电使正回</td>
                        <td>肉丝</td>
                        <td>爱旅行</td>
                        <td class="text-center">2017-06-06 10:45:24</td>


                        <td class="text-center">已发布</td>


                        <td class="text-center">
                            <a href="article_edit.html" class="btn btn-default btn-xs">编辑</a>
                            <a href="javascript:deleteTr( 1004 );" class="btn btn-danger btn-xs">删除</a>
                        </td>
                    </tr>



                    <tr>

                        <td>近难领管年算</td>
                        <td>杰克</td>
                        <td>会生活</td>
                        <td class="text-center">2017-05-27 16:49:04</td>


                        <td class="text-center">已发布</td>


                        <td class="text-center">
                            <a href="article_edit.html" class="btn btn-default btn-xs">编辑</a>
                            <a href="javascript:deleteTr( 1003 );" class="btn btn-danger btn-xs">删除</a>
                        </td>
                    </tr>



                    <tr>

                        <td>龙大实究</td>
                        <td>杰克</td>
                        <td>未分类</td>
                        <td class="text-center">2017-04-13 10:43:41</td>


                        <td class="text-center">草稿</td>


                        <td class="text-center">
                            <a href="post-edit.html?id=1002" class="btn btn-default btn-xs">编辑</a>
                            <a href="javascript:deleteTr( 1002 );" class="btn btn-danger btn-xs">删除</a>
                        </td>
                    </tr>



                    <tr>

                        <td>算性得走来拉</td>
                        <td>肉丝</td>
                        <td>奇趣事</td>
                        <td class="text-center">2017-04-06 04:58:12</td>


                        <td class="text-center">已发布</td>


                        <td class="text-center">
                            <a href="post-edit.html?id=1001" class="btn btn-default btn-xs">编辑</a>
                            <a href="javascript:deleteTr( 1001 );" class="btn btn-danger btn-xs">删除</a>
                        </td>
                    </tr>



                    <tr>

                        <td>几平会出气</td>
                        <td>管理员</td>
                        <td>奇趣事</td>
                        <td class="text-center">2017-04-03 20:16:34</td>


                        <td class="text-center">草稿</td>


                        <td class="text-center">
                            <a href="post-edit.html?id=1000" class="btn btn-default btn-xs">编辑</a>
                            <a href="javascript:deleteTr( 1000 );" class="btn btn-danger btn-xs">删除</a>
                        </td>
                    </tr>



                    <tr>

                        <td>世团先证型角</td>
                        <td>杰克</td>
                        <td>奇趣事</td>
                        <td class="text-center">2017-04-03 14:40:08</td>


                        <td class="text-center">已发布</td>


                        <td class="text-center">
                            <a href="post-edit.html?id=999" class="btn btn-default btn-xs">编辑</a>
                            <a href="javascript:deleteTr( 999 );" class="btn btn-danger btn-xs">删除</a>
                        </td>
                    </tr>



                    <tr>

                        <td>构更反步五</td>
                        <td>肉丝</td>
                        <td>奇趣事</td>
                        <td class="text-center">2017-03-30 22:31:52</td>


                        <td class="text-center">已发布</td>


                        <td class="text-center">
                            <a href="post-edit.html?id=998" class="btn btn-default btn-xs">编辑</a>
                            <a href="javascript:deleteTr( 998 );" class="btn btn-danger btn-xs">删除</a>
                        </td>
                    </tr>



                    <tr>

                        <td>组方些</td>
                        <td>肉丝</td>
                        <td>会生活</td>
                        <td class="text-center">2017-02-08 05:38:43</td>


                        <td class="text-center">草稿</td>


                        <td class="text-center">
                            <a href="post-edit.html?id=996" class="btn btn-default btn-xs">编辑</a>
                            <a href="javascript:deleteTr( 996 );" class="btn btn-danger btn-xs">删除</a>
                        </td>
                    </tr>



                    <tr>

                        <td>日做发光成</td>
                        <td>管理员</td>
                        <td>爱旅行</td>
                        <td class="text-center">2017-01-26 22:19:59</td>


                        <td class="text-center">草稿</td>


                        <td class="text-center">
                            <a href="post-edit.html?id=995" class="btn btn-default btn-xs">编辑</a>
                            <a href="javascript:deleteTr( 995 );" class="btn btn-danger btn-xs">删除</a>
                        </td>
                    </tr>


                </tbody>
            </table>

            <div class="row text-center">
                <ul class="pagination pagination-sm">
                    <li class="page-item first disabled"><a href="#" class="page-link">首页</a></li>
                    <li class="page-item prev disabled"><a href="#" class="page-link">上一页</a></li>
                    <li class="page-item active"><a href="#" class="page-link">1</a></li>
                    <li class="page-item"><a href="#" class="page-link">2</a></li>
                    <li class="page-item"><a href="#" class="page-link">3</a></li>
                    <li class="page-item"><a href="#" class="page-link">4</a></li>
                    <li class="page-item"><a href="#" class="page-link">5</a></li>
                    <li class="page-item"><a href="#" class="page-link">6</a></li>
                    <li class="page-item"><a href="#" class="page-link">7</a></li>
                    <li class="page-item next"><a href="#" class="page-link">下一页</a></li>
                    <li class="page-item last"><a href="#" class="page-link">尾页</a></li>
                </ul>
            </div>

        </div>
    </div>

    <script>
        // 设置左侧菜单
        $('#release_btn').click(function () {
            window.parent.setMenu(1, 1);
        })
    </script>
    <!-- 准备一个 文章分类 模板 -->
    <script id="cateList" type="text/html">
        <option value="">所有分类</option>
        {{each data v}}
        <option value='{{v.id}}'>{{v.name}}</option>
        {{/each}}
    </script>
    <!-- 准备一个 文章列表 模板 -->
    <script id="articleList" type="text/html">
        {{each data.data v}}
        <tr>
            <td>{{v.title}}</td>
            <td>{{v.author}}</td>
            <td>{{v.category}}</td>
            <td class="text-center">{{v.date}}</td>
            <td class="text-center">{{v.state}}</td>
            <td class="text-center">
                <a href="article_edit.html?id={{v.id}}" class="btn btn-default btn-xs">编辑</a>
                <a href="#" data-id='{{v.id}}' class="btn btn-danger btn-xs btn-delete">删除</a>
            </td>
        </tr>
        {{/each}}
    </script>
    <script>
        // 入口函数
        $(function () {
            //进到文章列表页面，就获取符合条件的文章封装成了一函数。
            function getData(myPage, cateType, cateState) {
                $.ajax({
                    type: 'get',
                    url: 'http://localhost:8080/api/v1/admin/article/query',
                    data: {
                        type: cateType,
                        state: cateState,
                        page: myPage,
                        perpage: 5
                    },
                    success: function (backData) {
                        //console.log(backData);
                        //4.把这些文章通过模板引擎渲染到页面
                        var resHtml = template('articleList', backData);
                        $('tbody').html(resHtml);

                        //根据发送ajax请求,获取到的总页数, 来重新绘制页码条
                        var totalPages = backData.data.totalPage;

                        //获取当前页码
                        window.currentPage = $pagination.twbsPagination('getCurrentPage');

                        //判断, 如果发送ajax请求获取的总页数, 和刚才的总页数不等, 这个时候就要重绘页码条
                        if (totalPages != myTotalPage || isTrue == true) {
                            myTotalPage = totalPages; //把发送ajax请求获取的总页数,赋值给myTotalPage

                            $pagination.twbsPagination('destroy');
                            $pagination.twbsPagination($.extend({}, defaultOpts, {
                                startPage: 1, //始终已第一页作为开始页
                                totalPages: totalPages
                            }));
                            //进来执行了之后,记得把isTrue改成false.
                            isTrue = false;
                        }

                    }
                });
            }

            //声明两个变量,用来记录当前筛选的 分类名和状态值.
            var cateType;
            var cateState;
            //声明一个变量,用来记录总页数,默认一开始是10
            var myTotalPage = 10;
            //声明一个变量,isTrue,用来记录点击的是筛选按钮.
            var isTrue = false;

            //需求: 一进到文章列表页面,就要显示真实存在的文章.
            //思路: 一进到页面,就触发搜索按钮点击事件.
            //$('#btnSearch').trigger('click');
            //思路: 一进到页面,自己去发送ajax请求,获取数据,渲染.
            //getData(1);


            //需求: 一进到页面,显示所有的文章分类.
            //1.一进到页面发送ajax获取所有的文章分类.
            $.ajax({
                type: 'get',
                url: 'http://localhost:8080/api/v1/admin/category/list',
                success: function (backData) {
                    //console.log(backData);
                    if (backData.code == 200) {
                        //2.通过模板引擎渲染到筛选按钮 左边的下拉菜单中.
                        var resHtml = template('cateList', backData);
                        $('#selCategory').html(resHtml);
                    }
                }
            });


            //需求: 分页
            var $pagination = $('.pagination');
            var defaultOpts = {
                first: '首页',
                prev: '上一页',
                next: '下一页',
                last: '末页',
                totalPages: myTotalPage, //总页数
                visiblePages: 5, //可见页签数
                //什么时候执行这个方法. 单击页签的时候会触发
                onPageClick: function (event, page) {
                    console.log('呵呵');
                    //console.log(event);//点击的触发事件
                    //console.log(page); //当前点击的页签的页码数.
                    getData(page, cateType, cateState);
                }
            }
            $pagination.twbsPagination(defaultOpts);

            //需求: 点击筛选按钮,筛选出符合条件的文章,渲染到页面.
            //1.给筛选按钮设置点击事件.
            $('#btnSearch').on('click', function (e) {
                e.preventDefault(); //阻止默认跳转
                isTrue = true; //点击筛选按钮,就修改isTrue这个变量的值为true.
                //2.获取筛选条件
                //   修改下拉菜单的value值.
                cateType = $('#selCategory').val(); //分类名
                cateState = $('#selStatus').val(); //状态值
                //3.发送ajax请求,获取到符合条件的文章
                getData(1, cateType, cateState);
            });



            //需求: 文章删除
            //1.给删除按钮们,委托注册事件.
            $('tbody').on('click', 'a.btn-delete', function () {
                //2.获取要删除的文章id
                var id = $(this).attr('data-id');
                //3.发送ajax请求,完成删除 //软删除:一般更改一个数据里的信息,表示更改了.
                $.ajax({
                    type: 'get',
                    url: 'http://localhost:8080/api/v1/admin/article/delete',
                    data: {
                        id: id
                    },
                    success: function (backData) {
                        if (backData.code == 204) {
                            //4.重新加载一下数据.
                            getData(currentPage, cateType, cateState);
                        }
                    }
                });
            });







            //计算机网络 编译原理 计算机操作系统 计算机组成原理 数据库设计和分析 数电模电

        });
    </script>

</body>

</html>